<%--
  Created by IntelliJ IDEA.
  User: teacher
  Date: 2023/11/2
  Time: 13:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Ajax返回JSON对象</title>
    <script>
        function show(id,e){
            document.getElementById("d").style.display = "block";

            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    let result = xhr.responseText;
                    console.log(result);
                    console.log(typeof result);
                    let user = eval("("+result+")");
                    console.log(user);
                    console.log(typeof user);
                    document.getElementById("d").style.left = e.clientX;
                    document.getElementById("d").style.top = e.clientY;
                    document.getElementById("s1").innerHTML = user.id;
                    document.getElementById("s2").innerHTML = user.username;
                    document.getElementById("s3").innerHTML = user.password;
                    document.getElementById("s4").innerHTML = user.phone;
                    document.getElementById("s5").innerHTML = user.address;
                }
            };
            xhr.open("get","${pageContext.request.contextPath}/findById.user?id="+id);
            xhr.send(null);
        }

        function hide(){
            document.getElementById("d").style.display = "none";
        }
    </script>
</head>
<body>
<!--
    需求一:查询所有用户信息,在列表中展示所有的用户名
    此时可以使用传统的web请求方式
-->
<ul>
    <c:forEach items="${users}" var="user">
        <li onmouseover="show(${user.id},event)" onmouseout="hide()">${user.username}</li>
    </c:forEach>
</ul>
<hr>
<!--
    需求二:使用Ajax实现下面功能
    当鼠标悬停在某一个用户的选项上时,显示对应用户的详细信息
    当鼠标离开选项,隐藏信息
    显示时,要求div必须在鼠标旁边显示
    鼠标在哪,div就在那显示
-->
<div id="d" style="background-color: #dddddd;width: 300px;padding: 10px;position: absolute;display: none;">
    编号:<span id="s1">1</span><br>
    用户名:<span id="s2">adminxxx</span><br>
    密码:<span id="s3">123xxx</span><br>
    电话:<span id="s4">13812345xxx</span><br>
    地址:<span id="s5">江苏-xxx</span><br>
</div>
</body>
</html>
